<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
		<link rel="stylesheet" href="${path}/static/css/forlogin.css" />
		<script type="text/javascript" src="${path}/static/js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="${path}/static/js/loginPage.js" ></script>
		<script>
			$(function () {
				let flag = true;
				let onl = false;
				$("#login").click(function () {
					if (!onl) {
						return;
					}
					flag = false;
					if (checkAll()) {
						$.ajax({
							url: "/login",
							type: "POST",
							dataType: "json",
							data: {
								uname: document.getElementsByName("uname")[0].value,
								upass: document.getElementsByName("upass")[0].value
							},
							success: function (data) {
								if (data == null) {
									$(".tip-box").removeClass("visibility-hidden");
									$(".errInformation").html("账号密码错误!");
								} else {
									window.location.href = "/center";
								}
							}
						});
					}
				});
				function checkAll() {
					let uname = document.getElementsByName("uname")[0].value.trim();
					let upass = document.getElementsByName("upass")[0].value.trim();
					if (uname == null || upass == null || uname === "" || upass === "") {
						$(".errInformation").html("请输入完整的登录信息!");
						$(".tip-box").removeClass("visibility-hidden");
						return false;
					} else {
						return true;
					}
				}
				let myThis;
				function checkThis() {
					if ($(myThis).val().trim() !== "") {
						$(".errInformation").html("请输入完整的登录信息!");
						$(".tip-box").addClass("visibility-hidden");
					} else {
						$(".errInformation").html("请输入完整的登录信息!");
						$(".tip-box").removeClass("visibility-hidden");
					}
				}
				$("#username").keyup(function () {
					myThis = this;
					if (!flag) {
						checkThis();
					}
				}).blur(function () {
					myThis = this;
					if (!flag) {
						checkAll();
					}
				});

				$("#userpass").keyup(function () {
					myThis = this;
					if (!flag) {
						checkThis();
					}
				}).blur(function () {
					myThis = this;
					if (!flag) {
						checkAll();
					}
				});

				$(".geetest_normal_logo").click(function () {
					isWWW();
					onl = navigator.onLine;
				});
			});
		</script>
	</head>

	<body>
		<div class="mian-body">
			<div class="lsSimpleheader" id="header">
				<a href="index.jsp" class="meizulogo" >
					<i class="mei_icon "></i>
				</a>
			</div>
			<div class="lsBanner-box ">
				<div class="bg-box ">
					<form class="main-form " action=" " method="post">
						<div class="tab-title">
							<a class="linkABlue " href="index.jsp">Log in</a>
						</div>
						<!--
                        	作者：1657064096@qq.com
                        	时间：2019-07-22
                        	描述：错误信息提示部分
                        -->
						<div class="tip-box visibility-hidden">
							<i class="err-icon "></i>
							<span class="errInformation"></span>
							<span class="close-icon "></span>
						</div>
						<div class="normalInput" id="cyccode-box">
							<div class="cycode-selectbox ">
								<input class="ipt-account ipt-focus" name="uname" id="username"
									maxlength="50 " placeholder="Phone/Flyme account " autocomplete="off " />
							</div>
						</div>
						<div class="normalInput pwd-box ">
							<input type="password" class="ipt-focus " name="upass" maxlength="16" id="userpass"
								placeholder="Password " autocomplete="off"/>
						</div>
						<!--验证部分-->
						<div style="height: 63px; ">
							<div class="captcha2 ">
								<div class="geetest_btn">
									<!--最开始显示的div-->
									<div class="geetest_radar_tip " id="begin_logo">
										<span class="geetest_radar_tip_content">
											Click to verify
										</span>
										<a class="geetest_logo geetest_normal_logo"></a>
									</div>
									<!--联网失败，显示的div-->
									<div class="geetest_radar_tip visibility-hidden" id="fail_logo" style="border:1px solid indianred;background: #FFD1CA;">
										<i class="behindimg fa_behind"></i>
										<span class="geetest_radar_tip_content err1">Network failure</span>
										<span class="geetest_radar_tip_content hand linkblue err2" >Retry</span>
										<a class="geetest_logo geetest_fail_logo"></a>
									</div>
									<!--联网成功，显示的div-->
									<div class="geetest_radar_tip geetest_succesed visibility-hidden" id="succeed_logo">
										<i class="behindimg su_behind"></i>
										<span class="geetest_radar_tip_content ">Verification Succeeded</span>
										<a class="geetest_logo geetest_suc_logo"></a>
									</div>
									<div style="clear: both;"></div>
								</div>
							</div>
						</div>
						<!--用来提示错误信息-->
						<div class="rememberField ">
							<span class="mzchkbox ">
								<span class="checkboxPic check_unchk">
									<i class="i_icon"></i>
								</span>
								<input name="remember" id="remember" type="checkbox" value="1"
									style="display: none; " />
							</span>
							<label tabindex="0 " style="width: 200px; float: right;margin-right: 74px;margin-top: 5px; ">Remember the login status</label>
						</div>
						<a id="login" class="fullBtnBlue login-btn">LOG IN</a>
						<a class="two_code"></a>
						<div class="transferField ">
							<a class="signup linkblue hand" href="/sign">Sign up</a>
							<a class="forgetpwd linkblue hand">Forget?</a>
						</div>
					</form>
				</div>
				<div class="footer" id="footer">
					<div class="mz_footerinner">
						<div class="mz_footer-layer1">
							<a class="a_float">About us</a>
							<div class="limit"></div>
							<a class="a_float">Contact us</a>
							<div class="limit"></div>
							<a class="a_float">Legal Statement</a>
							<div class="limit"></div>
							<a class="a_float" style="margin-right: 50px;">English</a>
							<div class="mz_footer-service">
								<span class="mz_service-label a_float">Customer Service: mzcs@meizu.com</span>
							</div>
							<div class="footer_signs" style="float: right;">
								<div class="mz_footer-sign">
									<a href="" class="mz_footer-facebook">
										<i class="mz_footer-icon"></i>
									</a>
								</div>
								<div class="mz_footer-sign">
									<a class="mz_footer-twitter">
										<i class="mz_footer-icon"></i>
									</a>
								</div>
								<div class="mz_footer-sign">
									<a class="mz_footer-google">
										<i class="mz_footer-icon"></i>
									</a>
								</div>
								<div class="mz_footer-sign">
									<a class="mz_footer-linkin">
										<i class="mz_footer-icon"></i>
									</a>
								</div>
							</div>
						</div>
						<div style="clear: both;"></div>
						<div class="mz_footer-layer2">
							<span>©2019 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
